<template>
  <div class="hello">
    <img class="banner-bg" src="@/assets/banner-bg.png"/>
    <div class="content">
      <div class="result">
        <div class="title">税后所得</div>
        <div class="real-income">
          <div><span class="income-num">{{real_income}}</span>&nbsp;元</div>
        </div>
        <div class="minus-info">
          <div>社保：{{society}}</div>
          <div>公积金：{{house_fund}}</div>
          <div>个税：{{tax}}</div>
        </div>
      </div>

      <div class="card">
        <div class="city">
          <div class="location-icon">
            <img src="@/assets/location.png">
          </div>
          <div class="se-select-wrap">
            <se-select size="large" v-model="city">
              <se-option
                  v-for="(option, index) in city_list"
                  :key="index"
                  :value="option.city"
                  :label="option.city"
              ></se-option>
            </se-select>
          </div>
        </div>
        <div class="income">
          <div class="location-icon">
            <img src="@/assets/money.png">
          </div>
          <div>
            <input type="number" v-model="income" placeholder="请输入税前薪资">
          </div>
        </div>
        <div class="income">
          <div class="location-icon">
            <img src="@/assets/money.png">
          </div>
          <div>
            <input type="number" v-model="current_month" placeholder="请输入当前月份">
          </div>
        </div>
      </div>

      <div class="card">
        <div class="line">
          <div>是否缴纳社保</div>
          <Radio :active="true"></Radio>
        </div>
        <div class="line">
          <div>养老保险</div>
          <div>{{old_insurance}}</div>
        </div>
        <div class="line">
          <div>失业保险</div>
          <div>{{job_insurance}}</div>
        </div>
        <div class="line">
          <div>医疗保险</div>
          <div>{{medicine_insurance}}</div>
        </div>
        <div class="line">
          <div>生育保险</div>
          <div>{{born_insurance}}</div>
        </div>
        <div class="line">
          <div>工伤保险</div>
          <div>{{accident_insurance}}</div>
        </div>
      </div>

      <div class="card">
        <div class="line">
          <div>是否缴纳公积金</div>
          <Radio :active="false"></Radio>
        </div>
        <div class="line">
          <div>公积金</div>
          <div>{{house_fund}}</div>
        </div>
      </div>
    </div>
    <TabBar active="normal"></TabBar>
  </div>
</template>

<script>
  import TabBar from '@/components/TabBar';
  import Radio from '@/components/Radio';
  import cityList from '@/common/city_list';
  import personalTotalTax from '@/common/personal_total_tax';

  let cityMap = {};
  for (let i = 0; i < cityList.length; i++) {
    cityMap[cityList[i].city] = cityList[i];
  }

  export default {
    name: 'Home',
    components: {
      TabBar,
      Radio
    },
    data() {
      return {
        income: 0,
        city: "北京市",
        city_list: cityList,
        house_fund_percent: 0.12,
        current_month: 1,
        with_social: true,
        with_house_fund: true
      }
    },
    computed: {
      real_income: function () {
        let res = this.income;
        if (this.with_social) {
          res -= this.society;
        }
        if (this.with_house_fund) {
          res -= this.house_fund;
        }
        if (res <= 0) {
          res = 0;
        }
        res -= this.tax;
        return Math.round(res * 100) / 100;
      },
      society: function () {
        return Math.round((this.old_insurance + this.job_insurance + this.medicine_insurance + this.born_insurance + this.accident_insurance) * 100) / 100;
      },
      tax: function () {
        let totalTax = 0;
        let tax = 0;
        for (let i = 1; i <= this.current_month; i++) {
          let totalSalary = this.income * i;
          let total = totalSalary;
          let totalSociety = this.society * i;
          let totalHouseFund = this.house_fund * i;
          if (this.with_social) {
            total -= totalSociety;
          }
          if (this.with_house_fund) {
            total -= totalHouseFund;
          }
          let totalMinus = 5000 * i;
          tax = this.calPersonalTaxTotal(total - totalMinus) - totalTax;
          totalTax += tax;
        }
        return Math.round(tax * 100) / 100;
      },
      cityInfo: function () {
        return cityMap[this.city];
      },
      old_insurance: function () {
        let conf = this.cityInfo.old_insurance;
        return this.calRange(this.income, conf.low_bound, conf.high_bound, conf.personal_ratio);
      },
      job_insurance: function () {
        let conf = this.cityInfo.job_insurance;
        return this.calRange(this.income, conf.low_bound, conf.high_bound, conf.personal_ratio);
      },
      medicine_insurance: function () {
        let conf = this.cityInfo.medicine_insurance;
        return this.calRange(this.income, conf.low_bound, conf.high_bound, conf.personal_ratio);
      },
      born_insurance: function () {
        let conf = this.cityInfo.born_insurance;
        return this.calRange(this.income, conf.low_bound, conf.high_bound, conf.personal_ratio);
      },
      accident_insurance: function () {
        let conf = this.cityInfo.accident_insurance;
        return this.calRange(this.income, conf.low_bound, conf.high_bound, conf.personal_ratio);
      },
      house_fund: function () {
        let conf = this.cityInfo.house_fund;
        return this.calRange(this.income, conf.low_bound, conf.high_bound, this.house_fund_percent);
      },
    },
    methods: {
      calRange: function (num, low, high, ratio) {
        let calNum = num;
        if (num < low) {
          calNum = low;
        } else if (high !== -1 && num > high) {
          calNum = high;
        }

        return Math.round(calNum * ratio * 100) / 100;
      },
      calPersonalTaxTotal: function (num) {
        for (let i = personalTotalTax.length - 1; i >= 0; i--) {
          let taxBound = personalTotalTax[i];
          if (num >= taxBound.low_bound) {
            return Math.round(num * 100 * taxBound.tax_ratio) / 100 - taxBound.extra_minus;
          }
        }
        return 0;
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  body {
    background-color: #ececec;
  }

  .banner-bg {
    width: 100%;
  }

  .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-bottom: 80px;
  }

  .content .result {
    font-size: 16px;
    color: white;
    text-align: center;
  }

  .content .result .title {
    margin: 20px 0 16px;
  }

  .content .result .real-income .income-num {
    font-size: 48px;
  }

  .content .result .minus-info {
    margin: 20px 0 5px;
    display: flex;
    justify-content: space-around;
  }

  .content .card {
    margin: 16px 16px;
    background-color: white;
    border-radius: 5px;
    padding: 10px;
  }

  .content .card .city {
    color: #aab6c4;
    font-size: 20px;
    display: flex;
    align-items: center;
    margin: 10px 0;
  }

  .content .card .city img {
    width: 20px;
  }

  .content .card .city .location-icon {
    margin: 0 10px;
  }

  .content .card .income {
    display: flex;
    padding: 10px 0;
    background-color: #eeeeee;
    border-radius: 5px;
  }

  .content .card .income .location-icon {
    margin: 0 12px;
  }

  .content .card .income input {
    background: transparent;
    border: none;
    line-height: 24px;
    font-size: 20px;
  }

  .content .card .income input::placeholder {
    color: #9dabbb;
  }

  .content .card .line {
    display: flex;
    justify-content: space-between;
    margin: 10px 5px;
  }


</style>
